import { Icon } from '@iconify/vue';
import { ElInputNumber } from 'element-plus';
import { defineComponent } from 'vue';

export const ProductItem = defineComponent(
  (props, { emit }) => {
    return () => {
      return (
        <>
          <div class="flex justify-between items-center py-2 pl-4 pr-2 relative">
            <div class="flex flex-row flex-1">
              <span class="text-gray-500">商品名称：</span>
              <span>{props.item.name}</span>
            </div>
            <a-button size="small" type="primary" onClick={() => emit('showProductDialog')}>
              选择商品
            </a-button>
            <div onClick={() => emit('deleteItem')}>
              <Icon class="ml-2 text-red-4 hover:text-red-3 active:text-red-5 cursor-pointer" icon="ep:delete-filled" />
            </div>
          </div>
          <div class="flex justify-between items-center py-2 px-4 font-size-12px">
            <span class="text-gray-500">商品单价：</span>
            <ElInputNumber size="small" controls-position="right" v-model={props.item.price} min={0} />
            <span class="text-gray-500">订购个数：</span>
            <ElInputNumber size="small" controls-position="right" v-model={props.item.nums} min={1} />
            <span class="text-gray-500">小计金额：</span>
            <span>{Number(props.item.price * props.item.nums).toFixed(2)}</span>
          </div>
        </>
      );
    };
  },
  {
    props: {
      index: {
        type: Number,
        default: 0
      },
      item: {
        type: Object,
        default: () => ({})
      }
    },
    emits: ['update:item', 'deleteItem', 'showProductDialog']
  }
);
